/* Copyright 2022 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=vars
 * #import=chrome://resources/cr_elements/cr_shared_vars.css.js
 * #import=chrome://resources/polymer/v3_0/paper-styles/color.js
 * #css_wrapper_metadata_end */

/* Colors: */
html {
  --annotation-background-color: var(--google-green-50);
  --annotation-text-color: var(--google-green-600);
  --border-color: var(--google-grey-300);
  --entity-image-background-color: var(--google-grey-50);
  --grey-fill-color: var(--google-grey-100);
  --icon-color: var(--google-grey-600);
  --url-color: var(--google-blue-600);
  --side-panel-url-color: var(--google-grey-700);
}

@media (prefers-color-scheme: dark) {
html {
  --annotation-background-color: var(--google-green-300);
  --annotation-text-color: var(--google-grey-900);
  --border-color: var(--google-grey-700);
  --entity-image-background-color: var(--google-grey-800);
  --grey-fill-color: var(--google-grey-700);
  --icon-color: white;
  --url-color: var(--google-blue-300);
  --side-panel-url-color: var(--google-grey-500);
}
}

/* Sizes: */
html {
  --card-max-width: 960px;
  --card-min-width: 550px;
  --card-padding-between: 16px;
  --card-padding-side: 24px;
  --first-card-padding-top: 24px;
  --cluster-max-width: var(--card-max-width);
  --cluster-min-width: var(--card-min-width);
  --cluster-padding-horizontal: var(--card-padding-side);
  --cluster-padding-vertical: var(--card-padding-between);
  --favicon-margin: 16px;
  --favicon-size: 16px;
  --first-cluster-padding-top: var(--first-card-padding-top);
  --pill-height: 34px;
  --pill-padding-icon: 12px;
  --pill-padding-text: 16px;
  --top-visit-favicon-size: 24px;
}
